<template lang="html">
  <d2-container>
    <page-header
      slot="header"
      ref="pageHeader"
      @doSearch="doSearch"
      @doReset="doReset"
      @doAdd="doAdd"
    />

    <!-- 中间内容容器 -->
    <div v-loading="loading" class="loading-wrapper">
      <el-table
        ref="multipleTable"
        border
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="index" width="50" label="序号" align="center" />
        <el-table-column prop="roleName" label="角色名称" show-overflow-tooltip min-width="180" />
        <el-table-column prop="remarks" label="角色简介" show-overflow-tooltip min-width="180" />
        <el-table-column
          prop="createName"
          label="创建人"
          align="center"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          v-if="$_has('roleEnableDisable')"
          label="角色状态"
          align="center"
          width="120"
        >
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.state"
              active-value="1"
              inactive-value="0"
              @change="statusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" width="160" />

        <el-table-column
          v-if="$_has_one_in_many(['roleFuncAuth', 'roleAddPerson', 'roleEdit', 'roleDel'])"
          label="操作"
          align="center"
          width="230"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-button v-has="'roleFuncAuth'" type="text" @click="handleFuncAuth(row)"
              >功能权限</el-button
            >
            <el-button v-has="'roleAddPerson'" type="text" @click="addPerson(row)"
              >添加人员</el-button
            >
            <el-button v-has="'roleEdit'" type="text" @click="doEdit(row)">修改</el-button>

            <el-button
              v-if="row.state !== '1'"
              v-has="'roleDel'"
              type="text"
              class="danger"
              @click="doDel(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加、修改角色 -->
    <role-dialog
      :dialogVisible.sync="roleDialogVisible"
      :currentRowObj="currentRowObj"
      @success="getTableData"
    />

    <!-- 权限配置弹窗开关 -->
    <func-auth-tree-draw
      :dialogVisible.sync="funcAuthTreeDrawVisible"
      :currentRowObj="currentRowObj"
    />

    <!-- 添加人员 -->
    <add-person-dialog
      :dialogVisible.sync="addPersonDialogVisible"
      :currentRowObj="currentRowObj"
      :loadCheckedArr="loadCheckedArr"
      @success="addPersonSuccess"
    />

    <!-- 底部分页 -->
    <footer-page
      slot="footer"
      :pageSize="pageSize"
      :currentPage="currentPage"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </d2-container>
</template>

<script>
import PageHeader from "./components/page-header";
import RoleDialog from "./components/role-dialog";
import FuncAuthTreeDraw from "./components/func-auth-dialog/components/func-auth-tree-draw";
import AddPersonDialog from "components/add-person-dialog";
import tableMixinKeepAlive from "mixins/tableMixinKeepAlive";
import { RoleList, RoleDel, RoleStatusChange, RoleUserBatch, RoleSimpleUser } from "api/sys/role";

export default {
  name: "system-role",
  components: {
    PageHeader,
    RoleDialog,
    FuncAuthTreeDraw,
    AddPersonDialog,
  },
  mixins: [tableMixinKeepAlive],
  data() {
    return {
      multipleSelection: [],
      // 当前点击的用户
      currentId: "",
      // 添加角色draw的开关
      roleDialogVisible: false,
      // 配置权限draw开关
      authDrawVisible: false,
      // 功能权限配置开关
      funcAuthTreeDrawVisible: false,
      // 添加人员弹窗开关
      addPersonDialogVisible: false,
      // 接口api
      getTableListSyncMethod: RoleList,
      // 当前行数据
      currentRowObj: null,
      loadCheckedArr: null,
    };
  },
  methods: {
    /**
     * 添加
     */
    doAdd() {
      this.currentRowObj = null;
      this.roleDialogVisible = true;
    },
    /**
     * 编辑
     */
    doEdit(row) {
      this.currentRowObj = row;
      this.roleDialogVisible = true;
    },
    /**
     * 删除
     */
    async doDel(row) {
      await this.$myConfirm("删除本角色");
      try {
        const { id } = row;
        await RoleDel(id);
        this.$message.success("角色删除成功");
        this.backPrePageWhenDelOne();
        this.getTableData();
      } catch (e) {
        console.log(e);
      }
    },
    /**
     * 添加人员
     */
    addPerson(row) {
      this.currentRowObj = row;
      this.loadCheckedArr = RoleSimpleUser;
      this.addPersonDialogVisible = true;
    },
    /**
     * 配置权限
     */
    setPermission(val) {
      const { id } = val;
      this.currentId = id;
      this.authDrawVisible = true;
    },

    handleFuncAuth(row) {
      this.currentRowObj = row;
      this.funcAuthTreeDrawVisible = true;
    },
    /**
     * 添加人员弹窗回调
     */
    async addPersonSuccess(val) {
      const { checkedPersonArr } = val;
      try {
        await RoleUserBatch({
          roleId: this.currentRowObj.id,
          userIds: checkedPersonArr.map((item) => item.userId),
        });
        this.$message.success("人员添加成功");
        this.getTableData();
      } catch (e) {
        console.log(e);
      }
    },
    /**
     * 列表数据格式化
     */
    tableDataFormat(data) {
      data.map((item) => {
        const { state } = item;
        item.originStatus = state;
      });
      return data;
    },
    /**
     * 启用、停用
     */
    async statusChange(row) {
      const { id, roleName, originStatus } = row;
      // 重置回去
      row.state = originStatus;
      const flag = row.state === "1";
      const str = flag ? "停用" : "启用";
      try {
        await this.$myConfirm(`<b>${str}</b>角色: <b>${roleName}</b> `);
        await RoleStatusChange(id);
        const newStatus = flag ? "0" : "1";
        row.state = row.originStatus = newStatus;
        this.$message.success(`角色${str}成功`);
      } catch (e) {
        console.log(e);
        this.$message.error(`角色${str}失败`);
      }
    },
  },
};
</script>
